<template>
    <div class="four">
        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-default product">
            <li v-for='item in card' :key='item.ID'>
                <router-link :to="'/detail/'+item.ID">
                    <div class="am-gallery-item">
                        <a href="detail.html" class="">
                            <img :src="item.src" alt="" />
                            <h3 class="am-gallery-title">{{item.title}}</h3>
                            <div class="am-gallery-desc">
                                <em>￥{{item.price}}</em><i class="am-icon-cart-plus"></i>
                            </div>
                        </a>
                    </div>
                </router-link>   
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                card: []
            }
        },
        created() {
            this.$http({
                // url:'/data/news.data'
                url: 'http://localhost:9527/cards',
            }).then((res) => {
                this.card = res.data;
                console.log(res);
                console.log(res.data)
                console.log(this.card)
                // console.log(this.newslist)
            }).catch((res) => {
                console.log('card.data error')
            })
        }
    }
</script>